<template>
	<view>
		<uni-nav-bar statusBar :border='false' :title="type==1?'文转视频':'文转漫画'" left-icon="left" @clickLeft="back">
		</uni-nav-bar>
		<view class="p-4 mb-3">
			<view class="p-4 bg-white rounded-4 mb-4">
				<textarea :maxlength='WEBCONFIG.max_text' v-model="formData.text" class="w-100 h9 min-vh-40"
					placeholder="请输入创作内容" />
				<view class="flex flex-row flex-x-space-between mt-5">
					<view class="flex flex-row">
						<view class="h9 text-dark-light-2 flex flex-y-center" @click="getCopy">
							<uni-icons type="calendar" size="16" color="grey"></uni-icons>粘贴
						</view>

						<view class="h9 text-dark-light-2 flex flex-y-center ml-3" @click="formData.text=''">
							<uni-icons type="trash" size="16" color="grey"></uni-icons>清空
						</view>
					</view>
					<view class="h9 text-dark-light-2">文字统计:{{formData.text.length}}/{{WEBCONFIG.max_text}}</view>
				</view>
			</view>


			<view class="bg-white rounded-4">
				<view class="p-4 flex flex-row flex-x-space-between flex-y-center">
					<view class="w-30 h9">视频名称</view>
					<view class="label w-65 h9 text-dark-light-3">
						<input placeholder="请输入视频名称" v-model='formData.name' />
					</view>
					<view class="w-5 ml-1">
						<uni-icons type="right" color="grey"></uni-icons>
					</view>
				</view>
				<view class="line mb-3 mt-3"></view>
				<view class="p-4 flex flex-row flex-x-space-between flex-y-center">
					<view class="w-30 h9">视频水印</view>
					<view class="label w-65 h9 text-dark-light-3">
						<input placeholder="请输入视频水印" v-model='formData.watermark' />
					</view>
					<view class="w-5 ml-1">
						<uni-icons type="right" color="grey"></uni-icons>
					</view>
				</view>
				<view class="line mb-3 mt-3"></view>
				<view class="p-4 flex flex-row flex-x-space-between flex-y-center" @click="cIndex=4;onShowPopup(true);">
					<view class="w-30 h9">视频风格</view>
					<view class="label w-65 h9 text-dark-light-3">
						<input placeholder="请选择视频风格" disabled v-model='styleText' />
					</view>
					<view class="w-5 ml-1">
						<uni-icons type="right" color="grey"></uni-icons>
					</view>
				</view>
				<view class="line mb-3 mt-3"></view>
				<view class="p-4 flex flex-row flex-x-space-between flex-y-center" @click="cIndex=1;onShowPopup(true);">
					<view class="w-30 h9">背景音乐</view>
					<view class="label w-65 h9 text-dark-light-3">
						{{formData.bgm.name}}
					</view>
					<view class="w-5 ml-1">
						<uni-icons type="right" color="grey"></uni-icons>
					</view>
				</view>
				<view class="line mb-3 mt-3"></view>
				<view class="p-4 flex flex-row flex-x-space-between flex-y-center" @click="cIndex=2;onShowPopup(true);">
					<view class="w-30 h9">配音员</view>
					<view class="label w-65 h9 text-dark-light-3">
						{{formData.dub.name}}
					</view>
					<view class="w-5 ml-1">
						<uni-icons type="right" color="grey"></uni-icons>
					</view>
				</view>
				<view class="line mb-3 mt-3"></view>
				<view class="p-4 flex flex-row flex-x-space-between flex-y-center" @click="cIndex=3;onShowPopup(true)">
					<view class="w-30 h9">配音设置</view>
					<view class="label w-65 h9 text-dark-light-3">
						音速 {{formData.soundSpeed}} 音量 {{formData.volume}}
					</view>
					<view class="w-5 ml-1">
						<uni-icons type="right" color="grey"></uni-icons>
					</view>
				</view>
				<view class="line mb-3 mt-3"></view>
				<view class="p-4 flex flex-row flex-x-space-between flex-y-center">
					<view class="w-30 h9">导出设置</view>
					<view class="label w-65 h9 text-dark-light-3">
						<radio-group @change="handleScreen">
							<radio color='#0476eb' value="1" :checked="formData.type=='1'" /> 横屏 16:9
							<radio class='ml-2' color='#0476eb' value="2" :checked="formData.type=='2'" /> 竖屏 9:16
						</radio-group>
					</view>
				</view>
			</view>
		</view>
		<view class="flex flex-center bg-white p-3" @click="createVideo">
			<view class="rounded-4 btn  text-white flex flex-center">消耗{{WEBCONFIG.deduct_points}}积分开始创作</view>
		</view>
		<uni-popup ref='showPopup'>
			<view class="bg-white vh-50 p-3" style="overflow-y: auto;">
				<view v-if='cIndex==1' style="overflow-y: auto;">
					<view v-for="(item,index) in bgmList" :key="index">
						<view class="flex flex-row flex-x-space-between flex-y-center p-4">
							<view class='flex flex-row p-2' @click="formData.bgm=item;onShowPopup(false);audiopStop();">
								<view class=" text-color-blue">{{item.name}}</view>
							</view>
							<view class="rounded-circle bg-1  flex flex-center" @click="playAudio(item.url)">
								<image src="../../static/icon/play.png" class="icon"></image>
							</view>
						</view>
						<view class="line"></view>
					</view>
				</view>
				<view v-else-if='cIndex==2' class="p-1" style="overflow-y: auto;">
					<view class="h7 text-color-blue flex flex-center">选择配音员</view>
					<view v-for="(item,index) in dubList" :key="index">
						<view class="flex flex-row flex-x-space-between flex-y-center">
							<view class='flex flex-row p-2' @click="formData.dub=item;onShowPopup(false);audiopStop();">
								<image class="avatar" :src="item.sex=='1'?WEBCONFIG.boy:WEBCONFIG.girl">
								</image>
								<view class="flex flex-column ml-3">
									<view class=" text-color-blue">配音员:{{item.name}}</view>
									<view class="h9 text-dark-light-3">{{item.voice}}</view>
								</view>
							</view>
							<view class="rounded-circle bg-1  flex flex-center" @click="playAudio(item.url)">
								<image src="../../static/icon/play.png" class="icon"></image>
							</view>
						</view>
						<view class="line"></view>
					</view>
				</view>
				<view v-else-if='cIndex==3'>
					<view class="mb-3">
						<view class="flex flex-row flex-x-space-between">
							<view class="text-dark-light-3 h9">音量</view>
							<view class="text-dark-light-3 h9">{{formData.volume}}</view>
						</view>
						<slider :value="formData.volume" max="100" @changing='handleVolume' step="1" />
					</view>
					<view class="mb-3">
						<view class="flex flex-row flex-x-space-between">
							<view class="text-dark-light-3 h9">音速</view>
							<view class="text-dark-light-3 h9">x{{formData.soundSpeed}}</view>
						</view>
						<slider :value="formData.soundSpeed" min='0.5' max="2" @changing='handleSoundSpeed'
							step="0.2" />
					</view>
				</view>
				<view v-else>
					<view class=" my-6 h7 text-center font-weight-600">选择风格</view>
					<view class="flex flew-row ">
						<view v-for="(item,index) in styleList" :key='index'
							class="model-box rounded-4  ml-4 position-relative" @click="formData.style=item.model;styleText=item.name;onShowPopup(false)">
							<image style="height:420rpx; width: 270rpx;" :src="item.image"></image>
							<view
								class="position-absolute bottom-0 model-name w-100 text-white text-center h9 py-3 rounded-bottom-right-3 rounded-bottom-left-3">
								{{item.name}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<zero-loading type="atom" mask v-if='loading'></zero-loading>
	</view>
</template>

<script setup lang="ts">
	import { ref, onMounted } from 'vue'
	import { $http, $page } from '../../utils';
	import { onLoad, onShow } from '@dcloudio/uni-app'
	import { useUserStore, useWebConfigStore, useRefs } from "@/stores";
	const type = ref(1)
	const webConfigStore = useWebConfigStore()
	const { WEBCONFIG } = useRefs(webConfigStore);
	const styleText=ref('')
	const styleList = ref()
	onLoad((option : any) => {
		type.value = option.type
		formData.value.model = option.type
		getBgm()
		getDubList()
		getStyle()
	})

	onMounted(() => {
		onShowPopup(false)
	})
	const audio = uni.createInnerAudioContext()
	//加载
	const loading = ref(false)
	const formData = ref({
		model: 1,
		name: '',
		watermark: '',
		soundSpeed: 1,//音速
		volume: 100,//音量
		type: '1',//
		text: '',//文字
		style: '',//风格
		dub: { name: '请选择', id: 0 },
		bgm: { id: 0, url: '', 'name': '请选择' }
	})

	//BGM
	const bgmList = ref([])
	//配音
	const dubList = ref([])
	//弹窗
	const showPopup = ref()
	//点击类型
	const cIndex = ref()
	//粘贴
	const getCopy = (() => {
		uni.getClipboardData({
			success(e) {
				formData.value.text = e.data
				uni.showToast({
					title: '粘贴成功',
					icon: 'none'
				})
			}
		})
	})
	const back = (() => {
		uni.navigateBack()
	})
	//弹窗
	const onShowPopup = ((e : boolean = true) => {
		if (e == false) {
			showPopup.value.close()
		} else {
			showPopup.value.open('bottom')
		}
	})
	//音量拖动
	const handleVolume = ((e : any) => {
		formData.value.volume = e.detail.value
	})
	//音速拖动
	const handleSoundSpeed = ((e : any) => {
		formData.value.soundSpeed = e.detail.value.toFixed(1)
	})
	//获取BGM
	const getBgm = (() => {
		$http.get('Bgm/getList').then(res => {
			bgmList.value = res.data
		})
	})
	//创建视频
	const createVideo = (() => {
		loading.value = true
		$http.post('Video/createVideo', { data: formData.value }).then(res => {
			$page.redirect('/pages/video/section?id=' + res.data.id)
		}).finally(() => {
			loading.value = false
		})
	})
	//获取Dub
	const getDubList = (() => {
		$http.get('Dub/getList').then(res => {
			dubList.value = res.data
		})
	})

	//切换屏幕
	const handleScreen = ((e : any) => {
		formData.value.type = e.detail.value
	})

	//播放
	const playAudio = ((src : string) => {
		if (audio.paused == false) {
			audio.stop()
		} else {
			audio.src = src
			audio.play()
		}
	})
	//暂停
	const audiopStop = (() => {
		audio.stop()
	})

	const getStyle = () => {
		$http.get('Style/getList').then(res => {
			styleList.value = res.data
		})
	}
</script>

<style>
	page {
		background-color: #f7f7f7;
	}

	.bg-1 {
		background-color: #dfdfdf;
		width: 60rpx;
		height: 60rpx;
	}

	.icon {
		width: 30rpx;
		height: 30rpx;
	}

	.line {
		width: 100%;
		height: 1rpx;
		background-color: #efefef;
	}

	.label {
		text-align: right;
	}

	.box {
		height: 120rpx;
		border: 1rpx solid #d8d8d8;
	}

	.bgc-blue {
		background-color: #0476eb;
	}

	.text-color-blue {
		color: #0476eb;
	}

	.avatar {
		width: 80rpx;
		height: 80rpx;
	}

	.btn {
		background-color: #0476eb;
		width: 80%;
		height: 80rpx;
	}

	.model-box {
		border: 4rpx solid #0476eb;
	}

	.model-name {
		background-color: rgba(0, 0, 0, 0.7);
	}
</style>